<template>
	<view class="vehicle-container">
		<view class="form-section">
			<text class="form-title">用车申请</text>
			
			<view class="form-item">
				<text class="form-label">用车日期</text>
				<picker mode="date" @change="onDateChange" :value="useDate">
					<view class="picker-input">
						<text>{{ useDate || '请选择用车日期' }}</text>
						<text class="picker-arrow">></text>
					</view>
				</picker>
			</view>

			<view class="form-item">
				<text class="form-label">用车时间</text>
				<picker mode="time" @change="onTimeChange" :value="useTime">
					<view class="picker-input">
						<text>{{ useTime || '请选择用车时间' }}</text>
						<text class="picker-arrow">></text>
					</view>
				</picker>
			</view>

			<view class="form-item">
				<text class="form-label">目的地</text>
				<input class="form-input" v-model="destination" placeholder="请输入目的地" />
			</view>

			<view class="form-item">
				<text class="form-label">用车事由</text>
				<textarea 
					class="form-textarea" 
					v-model="reason" 
					placeholder="请详细说明用车事由"
					maxlength="200"
				></textarea>
			</view>

			<view class="form-item">
				<text class="form-label">预计返回时间</text>
				<picker mode="time" @change="onReturnTimeChange" :value="returnTime">
					<view class="picker-input">
						<text>{{ returnTime || '请选择预计返回时间' }}</text>
						<text class="picker-arrow">></text>
					</view>
				</picker>
			</view>
		</view>

		<view class="submit-section">
			<button class="submit-button" @tap="submitVehicle" :disabled="!canSubmit()">
				提交申请
			</button>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

const useDate = ref('')
const useTime = ref('')
const destination = ref('')
const reason = ref('')
const returnTime = ref('')

const onDateChange = (e) => {
	useDate.value = e.detail.value
}

const onTimeChange = (e) => {
	useTime.value = e.detail.value
}

const onReturnTimeChange = (e) => {
	returnTime.value = e.detail.value
}

const canSubmit = () => {
	return useDate.value && useTime.value && destination.value && reason.value.trim()
}

const submitVehicle = () => {
	if (!canSubmit()) {
		uni.showToast({
			title: '请完善申请信息',
			icon: 'none'
		})
		return
	}
	
	uni.showLoading({ title: '提交中...' })
	setTimeout(() => {
		uni.hideLoading()
		uni.showToast({
			title: '申请提交成功',
			icon: 'success'
		})
	}, 2000)
}
</script>

<style scoped>
.vehicle-container {
	padding: 32rpx;
	background-color: #f5f6fa;
	min-height: 100vh;
}

.form-section {
	background: white;
	border-radius: 16rpx;
	padding: 32rpx;
	margin-bottom: 32rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.form-title {
	font-size: 40rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 32rpx;
	display: block;
}

.form-item {
	margin-bottom: 32rpx;
}

.form-label {
	font-size: 32rpx;
	color: #333;
	margin-bottom: 16rpx;
	display: block;
}

.picker-input, .form-input {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24rpx;
	border: 2rpx solid #e0e0e0;
	border-radius: 12rpx;
	background: #fafafa;
	font-size: 28rpx;
}

.form-input {
	width: 100%;
}

.picker-arrow {
	color: #999;
	font-size: 32rpx;
}

.form-textarea {
	width: 100%;
	min-height: 200rpx;
	padding: 24rpx;
	border: 2rpx solid #e0e0e0;
	border-radius: 12rpx;
	background: #fafafa;
	font-size: 28rpx;
	line-height: 1.5;
}

.submit-section {
	margin-bottom: 32rpx;
}

.submit-button {
	width: 100%;
	background: #2B5BA1;
	color: white;
	border: none;
	border-radius: 12rpx;
	padding: 32rpx;
	font-size: 32rpx;
	font-weight: 500;
}

.submit-button[disabled] {
	background: #ccc;
}
</style> 